<template>
  <div class="user-main" ref="userDataDom">
    <div class="main">
      <div class="title" ref="titleDom">
        <div class="presuffix" />
        {{ receiveTitle }}
        <img :src="icons.closeIcon" @click="closeUserDialog" class="close">
      </div>
      <div class="empty" v-if="!valueData || valueData.length === 0">
        暂无数据
      </div>
      <el-scrollbar>
        <div class="content">
          <div
            class="text"
            v-for="(paramsItem, index) in valueData"
            :key="index"
          >
            <div class="userinfo" v-if="paramsItem.fieldType === '1'">
              预警现场照片：
              <img :src="icons.placeholder" class="avatar">
            </div>
            <div v-text="paramsItem.fieldCh + ':' + (paramsData[paramsItem.fieldEn] === undefined ? '' : paramsData[paramsItem.fieldEn])" v-else />
          </div>
        </div>
      </el-scrollbar>
      <div class="bottom" />
    </div>

  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import placeholder from '../../assets/dialog/user_avatar_holder.png'
import closeIcon from '@/assets/dialog/warn_close.svg'
import { findApiOutListById } from '@/api/mapConfig'
import { ElScrollbar } from 'element-plus'

const emit = defineEmits(['closeUserDialog'])
const props = defineProps({
  layerId: {
    type: Number,
    default: -1
  },
  paramsData: {
    type: Object,
    default: () => { }
  },
  title: {
    type: String,
    default: ''
  }
})
const icons = ref({
  closeIcon: closeIcon,
  placeholder: placeholder
})
const userDataDom = ref()
const titleDom = ref()
const isDown = ref(false) // 鼠标是否按下
const clientX = ref(0) // 当前x坐标
const clientY = ref(0) // 当前y坐标
const offsetLeft = ref(0) // 点击位置与dom元素左侧偏移量
const offsetTop = ref(0) // 点击位置与dom元素上侧偏移量
const receiveTitle = ref('' as any)
// 弹窗标题
const title = ref('' as any)
// 图层id
const layerId = computed(() => props.layerId)
// 填充所需数据
const paramsData = computed(() => props.paramsData)
// 填充所需下发key
const valueData = ref([] as any)
// 弹窗是否被关闭
const isClose = ref(false)
// 关闭弹窗
const closeUserDialog = () => {
  isClose.value = true
  emit('closeUserDialog')
}
watch(layerId, () => {
  findOutById(layerId.value)
})

// 通过id获取出参
const findOutById = async (id: any) => {
  const outData = await findApiOutListById(id)
  valueData.value = outData.filter((item: any) => item.isDetail === '1')
  // 通过下发key值取到详情弹窗的标题
  outData.forEach((item: any) => {
    if (item.isDetailTitle === '1') {
      title.value = paramsData.value[item.fieldEn]
    }
  })
  receiveTitle.value = props.title !== null && props.title !== '' ? props.title : title.value
}

// 控制弹窗显示范围
const ctlDomLocation = () => {
  const userClientWidth = userDataDom.value.clientWidth
  const userClientHeight = userDataDom.value.clientHeight
  const userOffsetLeft = userDataDom.value.offsetLeft
  const userOffsetTop = userDataDom.value.offsetTop

  const parentDomClientWidth = userDataDom.value.parentElement.clientWidth
  const parentDomClientHeight = userDataDom.value.parentElement.clientHeight

  if (userOffsetLeft < 0) {
    userDataDom.value.style.left = '15px'
  }
  if (userOffsetLeft > parentDomClientWidth - userClientWidth) {
    userDataDom.value.style.left =
      parentDomClientWidth - userClientWidth - 15 + 'px'
  }
  if (userOffsetTop < 15) {
    userDataDom.value.style.top = '15px'
  }
  if (userOffsetTop > parentDomClientHeight - userClientHeight) {
    userDataDom.value.style.top =
      parentDomClientHeight - userClientHeight - 15 + 'px'
  }
}
watch(paramsData, () => {
  findOutById(layerId.value)
})
onMounted(() => {
  isClose.value = true
  if (layerId.value) {
    findOutById(layerId.value)
  }
  ctlDomLocation()
  // 弹窗的点击事件
  titleDom.value.onmousedown = (e: any) => {
    isDown.value = true
    clientX.value = e.clientX
    clientY.value = e.clientY
    offsetLeft.value = userDataDom.value.offsetLeft
    offsetTop.value = userDataDom.value.offsetTop
  }
  window.onmousemove = (e: any) => {
    if (!isDown.value) {
      return
    }
    e.preventDefault()
    const nx = e.clientX
    const ny = e.clientY
    const nl = nx - (clientX.value - offsetLeft.value)
    let nt = ny - (clientY.value - offsetTop.value)
    if (nt < 0) {
      nt = 0
      isDown.value = false
    }
    userDataDom.value.style.left = nl + 'px'
    userDataDom.value.style.top = nt + 'px'
  }
  titleDom.value.onmouseup = () => {
    isDown.value = false
    ctlDomLocation()
  }
  window.onmouseup = () => {
    isDown.value = false
    if (!isClose.value) {
      ctlDomLocation()
    }
  }
  window.onblur = () => {
    isDown.value = false
  }
})

defineExpose({ userDataDom, ctlDomLocation })
</script>
<style lang="scss" scoped>
.user-main {
  display: flex;
  width: 100%;
  max-width: 30%;
  max-height: 60%;
  min-height: 30%;
  box-sizing: border-box;

  .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    background: #1f2935;
    box-sizing: border-box;

    .empty {
      color: #A3A6AD;
      font-size: 14px;
    }

    .content {
      column-count: 2;
      column-gap: 20px;
      margin: 10px 20px;

      .text {
        width: 100%;
        max-width: 200px;
        font-size: 12px;
        font-weight: normal;
        line-height: 30px;
        letter-spacing: 0px;
        color: #ffffff;
        box-sizing: border-box;
        word-break: break-all;
      }

      .userinfo {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 10px;
        white-space: nowrap;

        .avatar {
          width: 0;
          flex: 1;
          height: 90px;
          margin-top: 12px;
        }
      }
    }

    /* 重新定义内容块排序优先级，让其横向排序 */
    .content:nth-child(2n) {
      order: 1;
    }

    .content:nth-child(2n + 1) {
      order: 2;
    }

    .content::before,
    .content::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }

    .title {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      color: #ffffff;
      font-size: 14px;
      background: #283442;

      .presuffix {
        width: 3px;
        height: 20px;
        border-radius: 0px 3px 3px 0px;
        background: #e6a23c;
        margin: 0 12px;
      }

      .close {
        width: 18px;
        height: 18px;
        margin-left: auto;
        margin-right: 12px;
        cursor: pointer;
      }
    }

    .bottom {
      width: 100%;
      height: 20px;

      background: #283442;
    }
  }
}
</style>
